<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面详情</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/detaile.css">

    <script src="/lib/require/require.js" data-main="/js/detaile"></script>
</head>
<body>
    <!-- header -->
    <header></header>
    <!-- 内容区 -->
    <div class="detaile-main wrap">
        <!-- 位置 -->
        <div class="subnav-mark">
            <a href="">Yuki动漫</a>
            <span> &gt; </span>
            <a href="">Yuki原创</a>
            <span> &gt; </span>
            <a href="">服装</a>
            <span> &gt; </span>
            <a href="">Yuki原创T恤保卫星球男女卡通情侣</a>
        </div>
        <!-- 商品详情 -->
        <div class="detaile-product">
            <!-- 商品图片展示 -->
            <div class="detaile-product-left fl">
                <!-- 小图列表 -->
                <ul class="detaile-small-img-list fl"></ul>
                <!-- 大图 -->
                <div class="detaile-big-img fr">
                    <img class="middleImg" src="" alt="">
                    <div class="zhezhao active"></div>
                </div>
                <!-- 中图 -->
                <div class="detaile-middle-img active">
                    <img class="bigImg" src="" alt="">
                </div>
            </div>
            <!-- 商品详情描述 -->
            <div class="detaile-product-right fr">
                <h1 class="detaileTitle"></h1>
                <p class="detaileTpis"></p>
                <div class="price-message">
                    <div class="price">
                        <span>售价：</span>
                        <strong class="detailePrice"></strong>
                    </div>
                    <div class="pro">
                        <span>促销：</span>
                        <strong>无</strong>
                    </div>
                    <div class="serve">
                        <span>服务：</span>
                        <span class="mid-span">&bull;&nbsp;48小时快速退款</span>
                        <span class="last-span">&bull;&nbsp;365天贴心服务</span>
                    </div>
                </div>
                <div class="detaile-tpis">
                    <div class="det-text">默认：</div>
                    <div class="det-con">
                        <em>600ml</em>
                        <span class="product_id" style="display:none;"></span>
                    </div>
                </div>
                <div class="detaile-tpis">
                    <div class="det-text">数量：</div>
                    <div class="det-con">
                        <div class="det-num-wrap">
                            <span class="reduce">-</span>
                            <span class="number">1</span>
                            <span class="plus">+</span>
                        </div>
                        <p class="det-num">(剩余商品数量<span class="total">30</span>件)</p>
                    </div>
                </div>
                <div class="detaile-btns">
                    <a class="det-shopping" href="javascript:void(0);">立即购买</a>
                    <a class="det-cart" href="javascript:void(0);">加入购物袋</a>
                    <a class="operation" href="javascript:void(0);">
                        <img src="/img/detaile/sou.png" alt="">
                        <span>收藏</span>
                    </a>
                    <a class="operation" href="javascript:void(0);">
                        <img src="/img/detaile/fen.png" alt="">
                        <span>分享</span>
                    </a>
                </div>
            </div>
        </div>  
    </div>
    
    <!-- 商品详情-推荐商品 -->
    <div class="product-assess wrap clear">
        <div class="assess-left fl">
            <div class="btn-toggle">
                <a href="javascript:void(0);" class="deta-pro active">
                    商品详情
                </a>
                <a href="javascript:void(0);" class="deta-ass">
                    评价(0)
                </a>
            </div>
            <div class="assess-pro-con">
                <img class="assessImg" src="" alt="">
            </div>
            <!-- 评论 -->
            <div class="assess-ass-con"  style="display:none;">
                <!-- 评论头部 -->
                <div class="ass-con-btns">
                    <a class="ass-con-btns-item active" href="javascript:void(0);">
                        <span class="btn"><i></i></span>
                        <span class="btn-t">全部(2)</span>
                    </a>
                    <a class="ass-con-btns-item" href="javascript:void(0);">
                        <span class="btn"><i></i></span>
                        <span class="btn-t">有图(2)</span>
                    </a>
                    <a class="ass-con-btns-item" href="javascript:void(0);">
                        <span class="btn"><i></i></span>
                        <span class="btn-t">好评(2)</span>
                    </a>
                    <a class="ass-con-btns-item" href="javascript:void(0);">
                        <span class="btn"><i></i></span>
                        <span class="btn-t">中评(2)</span>
                    </a>
                    <a class="ass-con-btns-item" href="javascript:void(0);">
                        <span class="btn"><i></i></span>
                        <span class="btn-t">差评(2)</span>
                    </a>
                </div>
                <!-- 评论每一项 -->
                <div class="comment-com">
                    <div class="comment-con-left">
                        <img src="/img/detaile/samll.JPEG" alt="">
                        <p class="ellipsis">空间和地方</p>
                    </div>
                    <div class="comment-con-right">
                        <p class="comment-con-right-t">顾客很懒，什么也没有留下</p>
                        <div class="content">
                            <img src="/img/detaile/samll.JPEG" alt="">
                            <img src="/img/detaile/samll.JPEG" alt="">
                        </div>
                        <div class="comment-text">
                            <span>款式:保卫星球款 尺码:男款L</span>
                            <i>2018-01-05 16:29:39</i>
                        </div>
                    </div>
                </div>
                <div class="comment-com">
                    <div class="comment-con-left">
                        <img src="/img/detaile/samll.JPEG" alt="">
                        <p class="ellipsis">空间和地方</p>
                    </div>
                    <div class="comment-con-right">
                        <p class="comment-con-right-t">顾客很懒，什么也没有留下</p>
                        <div class="content">
                            <img src="/img/detaile/samll.JPEG" alt="">
                            <img src="/img/detaile/samll.JPEG" alt="">
                        </div>
                        <div class="comment-text">
                            <span>款式:保卫星球款 尺码:男款L</span>
                            <i>2018-01-05 16:29:39</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="assess-right fr">
            <div class="assess-right-title">猜你喜欢</div>
            <div class="assess-right-con">
                
            </div>
        </div>
    </div>


    <!-- footer -->
    <footer></footer>
    <!-- 模板引擎 -->
    <script type="text/html" id="smallImgUrl">
        {{each samllImg curr}}
        <li><img src="{{curr.smallImg}}" alt=""></li>
        {{/each}}
    </script>
    <!-- 猜你喜欢 -->
    <script type="text/html" id="likeProduct">
        {{each likeArr item}}
        <div class="assess-right-con-item">
            <div class="assess-right-con-item-img fl">
                <img src="{{item.imgurl}}" alt="">
            </div>
            <div class="assess-right-con-item-tpis fr">
                <p class="link-nav">{{item.linkNav}}</p>
                <p class="price-old"><span class="newPrice fl">￥{{item.newP}}</span><span class="oldPrice fr">￥{{item.oldP}}</span></p>
            </div>
        </div>
        {{/each}}
    </script>
</body>
</html>